import React, { useEffect, useState, useRef } from 'react'
import { InputNumber, Checkbox, App, Space, Form, Row, Col } from 'antd'
import styles from './RateList.less'

const originRateList = [
  {
    label: `1期`,
    key: 1,
  },
  {
    label: `2期`,
    key: 2,
  },
  {
    label: `3期`,
    key: 3,
  },
  {
    label: `4期`,
    key: 4,
  },
  {
    label: `5期`,
    key: 5,
  },
  {
    label: `6期`,
    key: 6,
  },
  {
    label: `7期`,
    key: 7,
  },
  {
    label: `8期`,
    key: 8,
  },
  {
    label: `9期`,
    key: 9,
  },
  {
    label: `10期`,
    key: 10,
  },
  {
    label: `11期`,
    key: 11,
  },
  {
    label: `12期`,
    key: 12,
  },
]

const RateListForm = (props) => {
  const { rateList, onChange, form } = props
  const [ rateData, setRateData ] = useState([])

  const handleCheckChange = (e, key) => {
    const list = [...rateData]
    const rateItem = list.find(i => i.key === key)
    rateItem.checked = e
    setRateData(list)
  }

  useEffect(() => {
    rateList.forEach(i => {
      form.setFieldValue(i.key, i.value)
    })
    setRateData(rateList)
  }, [rateList])

  useEffect(() => {
    const res = {}
    rateData.forEach(i => {
      if (i.checked) {
        res[i.key] = i.value
      }
    })
    onChange(res)
  }, [rateData])

  const handleInput = (e, key) => {
    const list = [...rateData]
    const rateItem = list.find(i => i.key === key)
    if (rateItem) {
      rateItem.value = e
    }
    setRateData(list)
  }

  return (
    <>
      {rateList && rateList.length ? rateList.map(rate => {
        const rateItem = rateData.find(i => i.key === rate.key)
        const checked = rateItem ? rateItem.checked : false

        return (
          <div className={styles.form_line} key={rate.key}>
            <Checkbox
              className={styles.checkbox_line}
              onChange={e => handleCheckChange(e.target.checked, rate.key)}
              key={rate.key}
              value={rate.value}
              checked={checked}
            >
              {rate.label}
            </Checkbox>
            <Form.Item
              name={rate.key}
              rules={checked ? [{ required: true, message: '请输入对应的利率！' }] : []}
              // help='利率对应用户尾款金额的百分比（最高不超过24%），例如10%指的是尾款金额的利息为10个点'
            >
              <InputNumber min={0} addonAfter='%' placeholder='请输入' onChange={e => handleInput(e, rate.key)}></InputNumber>
            </Form.Item>
          </div>
        )
      }) : null}
    </>
  )
}

export default props => {
  const { data, form } = props
  const [rateList, setRateList] = useState([])

  useEffect(() => {
    if (data && data.rate_list) {
      const { rate_list } = data
      const keys = Object.keys(rate_list)
      setRateList(
        originRateList.map(i => {
          const item = {
            ...i,
            label: `${i.key}期`,
            key: i.key,
            value: rate_list[i.key] || 0,
            checked: keys.includes(i.key + '')
          }
          return item
        })
      )
    }
  }, [data])
  
  return (
    <Form.Item label='分期利率设置' name='rate_list'>
      <RateListForm rateList={rateList} form={form}></RateListForm>
    </Form.Item>
  )
}
